<template>
  <div class="OrganizationalStructure">
    <div class="left">
      <div class="left-head">组织结构</div>
      <div class="tree-list">
        <el-tree
          :data="data"
          node-key="id"
          :props="defaultProps"
          @current-change="treeClick"
          highlight-current
          :expand-on-click-node="false"
          :render-content="renderContent"
          class="el-tree-redefine"
        ></el-tree>
      </div>
    </div>
    <div class="right">
      <div class="right-operation">
        <el-form ref="form" label-width="60px">
          <span class="operation-title">部门信息</span>
          <el-button class="but-add" type="text" size="medium" @click="addNextLevelClick">
            <i class="add-icon"></i>添加下级部门
          </el-button>
          <el-button class="but-modify" type="text" size="medium" @click="editClick">
            <i class="modify-icon"></i>修改
          </el-button>
          <el-button class="but-remove" type="text" size="medium" @click="removeClick">
            <i class="remove-icon"></i>删除
          </el-button>
        </el-form>
      </div>
      <div class="right-head">
        <span class="head-title">机构详情</span>
        <span class="head-text">下面显示机构详细信息</span>
      </div>
      <div class="card-item">
        <el-row>
          <el-col class="item-title">
            <span>上级机构:</span>
          </el-col>
          <el-col class="item-text">
            <span>{{organizationDetails.parent ? organizationDetails.parent.name : ""}}</span>
          </el-col>
        </el-row>
      </div>
      <div class="card-item">
        <el-row>
          <el-col class="item-title">
            <span>机构编号:</span>
          </el-col>
          <el-col class="item-text">
            <span>{{organizationDetails.sn}}</span>
          </el-col>
        </el-row>
      </div>
      <div class="card-item">
        <el-row>
          <el-col class="item-title">
            <span>机构名称:</span>
          </el-col>
          <el-col class="item-text">
            <span>{{organizationDetails.name}}</span>
          </el-col>
        </el-row>
      </div>
      <div class="card-item">
        <el-row>
          <el-col class="item-title">
            <span>中文名称:</span>
          </el-col>
          <el-col class="item-text">
            <span>{{organizationDetails.cnName}}</span>
          </el-col>
        </el-row>
      </div>
      <div class="card-item">
        <el-row>
          <el-col class="item-title">
            <span>英文名称:</span>
          </el-col>
          <el-col class="item-text">
            <span>{{organizationDetails.enName}}</span>
          </el-col>
        </el-row>
      </div>
    </div>
    <AddOrganizationPerform
      ref="AddOrganizationPerform"
      :organization="selectOrgaization"
      @change="updateOrganizationsTree"
    ></AddOrganizationPerform>
    <EditOrganizationPerform
      ref="EditOrganizationPerform"
      :organization="selectOrgaization"
      @change="updateOrganizationsTree"
    ></EditOrganizationPerform>
    <el-dialog
      class="remove-dialog"
      title="提示"
      :visible.sync="removeDialogVisible"
      width="20%"
      left
    >
      <div class="dialog-body">
        <div class="body-title">确认删除该组织吗？</div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="removeDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="removeConfirmClick()">确 定</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  organizationsTree,
  organizationDetail,
  deleteOrganization,
  postOperationLogs
} from "@/api/apiManagement";
import AddOrganizationPerform from "./components/AddOrganizationPerform";
import EditOrganizationPerform from "./components/EditOrganizationPerform";

export default {
  components: { AddOrganizationPerform, EditOrganizationPerform },
  data() {
    return {
      robot_id: null,
      selection: null,
      data: [],
      defaultProps: {
        children: "children",
        label: "name",
        isLeaf: "leaf"
      },
      selectOrgaization: {},
      organizationDetails: {},
      removeDialogVisible: false
    };
  },
  created() {
    this.robot_id = localStorage.getItem("ydRobot_id");
    //
    this.getOrganizationsTree();
  },
  mounted() {},
  methods: {
    getOrganizationsTree() {
      organizationsTree()
        .then(response => {
          if (response) {
            this.data = this.deepRecursionTraversal(response);
          }
        })
        .catch(() => {});
    },
    deepRecursionTraversal(node) {
      node.map(item => {
        if (item.children) {
          this.deepRecursionTraversal(item.children);
        } else {
          item.leaf = true;
          item.id = item.id;
        }
        return item;
      });
      return node;
    },
    getOrganizationsDetail() {
      organizationDetail({}, this.selectOrgaization.id)
        .then(response => {
          if (response) {
            this.organizationDetails = response;
          }
        })
        .catch(() => {});
    },
    renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <i class={data.leaf ? "file" : "folder"} />
          <span style="margin-left:5px;">{node.label}</span>
        </span>
      );
    },
    treeClick(obj, node) {
      if (obj) {
        this.selectOrgaization = obj;
        this.getOrganizationsDetail();
      } else {
        this.selectOrgaization = {};
      }
    },
    updateOrganizationsTree() {
      this.organizationDetails = {};
      this.getOrganizationsTree();
    },
    addNextLevelClick() {
      this.$refs.AddOrganizationPerform.isShowDia(true);
    },
    editClick() {
      if (this.selectOrgaization && this.selectOrgaization.id) {
        this.$refs.EditOrganizationPerform.isShowDia(true);
      } else {
        this.$message("请选择组织");
      }
    },
    removeClick() {
      if (this.selectOrgaization && this.selectOrgaization.id) {
        if (this.selectOrgaization.parentId === 0) {
          this.$message("当前组织不可删除");
        } else {
          this.removeDialogVisible = true;
        }
      } else {
        this.$message("请选择组织");
      }
    },
    removeConfirmClick() {
      deleteOrganization({}, this.selectOrgaization.id)
        .then(response => {
          this.setOperationLogs("修改-组织-" + this.selectOrgaization.name);
          this.$message({
            message: "删除成功",
            type: "success"
          });
          this.removeDialogVisible = false;
          this.updateOrganizationsTree();
        })
        .catch(() => {});
    },
    // 添加日志管理
    setOperationLogs(content) {
      var parm = {
        content: content,
        deviceId: localStorage.getItem("ydRobot_device_id"),
        type: 0
      };
      postOperationLogs(parm)
        .then(response => {})
        .catch(() => {});
    }
  }
};
</script>

<style>
.clearfix:after {
  content: "";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}
.clearfix {
  *zoom: 1;
}

.OrganizationalStructure {
  width: 100%;
  height: 100%;
}
.OrganizationalStructure .left {
  width: 300px;
  height: 100%;
  /* background-color: #eeeeee; */
  background-color: #fff;
  border-right: 1px solid rgb(202, 231, 238);
  float: left;
  position: relative;
}
.OrganizationalStructure .right {
  position: relative;
  /* width: 100%; */
  width: calc(100% - 300px);
  height: 100%;
  background-color: #ffffff;
  border-left: 1px solid rgb(202, 231, 238);
  float: right;
  overflow-y: auto;
  overflow-x: hidden;
}
.OrganizationalStructure .left-head {
  width: 100%;
  height: 27px;
  padding: 0 5px;
  line-height: 27px;
  font-size: 13px;
  background: linear-gradient(
    rgb(227, 242, 238),
    rgb(202, 231, 238)
  ); /* 标准的语法 */
}
.OrganizationalStructure .tree-list {
  position: absolute;
  width: 100%;
  height: calc(100% - 27px);
  overflow: auto;
}
.OrganizationalStructure .el-tree-redefine {
  min-width: 100%;
  display: inline-block;
}
.OrganizationalStructure .right-operation {
  width: 100%;
  height: 27px;
  padding: 0 5px;
  line-height: 27px;
  font-size: 13px;
  background: linear-gradient(
    rgb(227, 242, 238),
    rgb(202, 231, 238)
  ); /* 标准的语法 */
}
.OrganizationalStructure .operation-title {
  width: 100px;
  height: 27px;
  padding-left: 10px;
  line-height: 27px;
  font-size: 15px;
  text-align: left;
  color: rgb(72, 158, 2);
  float: left;
}
.OrganizationalStructure .right-head {
  width: 100%;
  height: 56px;
  padding: 5px;
  /* line-height: 56px; */
  font-size: 13px;
  background: linear-gradient(
    rgb(227, 242, 238),
    rgb(202, 231, 238)
  ); /* 标准的语法 */
}
.OrganizationalStructure .head-title {
  display: block;
  width: 200px;
  height: 27px;
  margin-left: 10px;
  line-height: 27px;
  font-size: 19px;
  color: #4c4c4c;
}
.OrganizationalStructure .head-text {
  display: block;
  width: 200px;
  height: 18px;
  margin-left: 10px;
  line-height: 18px;
  font-size: 13px;
  color: #575757;
}

.OrganizationalStructure .left .custom-tree-node span {
  font-size: 13px;
}
.OrganizationalStructure .folder {
  width: 13px;
  height: 13px;
  margin-top: 3px;
  /* background-color: rgb(10, 158, 80); */
  background-image: url(../../../static/resources/images/folder.png);
  background-size: 100% 100%;
  float: left;
}
.OrganizationalStructure .file {
  width: 13px;
  height: 13px;
  margin-top: 3px;
  /* background-color: rgb(255, 0, 0); */
  background-image: url(../../../static/resources/images/file.png);
  background-size: 100% 100%;
  float: left;
}

.OrganizationalStructure .right-operation .el-form-item {
  /* width: 300px; */
  width: auto;
  margin-top: 0;
  margin-bottom: 0;
  float: left;
}
.OrganizationalStructure .right-operation .el-form-item__label {
  line-height: 26px;
  float: left;
}
.OrganizationalStructure .right-operation .el-form-item__content {
  /* width: 200px; */
  margin-left: 5px !important;
  line-height: 26px;
  float: left;
}

.OrganizationalStructure .but-add,
.OrganizationalStructure .but-modify,
.OrganizationalStructure .but-remove {
  height: 27px;
  margin-left: 15px;
  margin-right: 10px;
  padding: 0;
  font-size: 13px;
  color: #000;
  float: left;
}
.OrganizationalStructure .add-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../static/resources/images/add.png);
  background-size: 100% 100%;
  float: left;
}
.OrganizationalStructure .modify-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../static/resources/images/modify.png);
  background-size: 100% 100%;
  float: left;
}
.OrganizationalStructure .remove-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../static/resources/images/remove.png);
  background-size: 100% 100%;
  float: left;
}
.OrganizationalStructure .normal {
  width: 13px;
  height: 13px;
  margin-top: 2px;
  background-color: rgb(10, 158, 80);
  /* background-image: url(../../../static/resources/images/reset_a.png);
  background-size: 100% 100%; */
  float: left;
}
.OrganizationalStructure .error {
  width: 13px;
  height: 13px;
  margin-top: 2px;
  background-color: rgb(255, 0, 0);
  /* background-image: url(../../../static/resources/images/reset_a.png);
  background-size: 100% 100%; */
  float: left;
}

.OrganizationalStructure .card-item {
  margin: 7px 0;
}
.OrganizationalStructure .item-title {
  width: 260px;
  height: auto;
  background-color: #eeeeee;
}
.OrganizationalStructure .item-text {
  width: calc(100% - 260px);
  height: auto;
  background-color: #ffffff;
}
.OrganizationalStructure .card-item span {
  display: block;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  line-height: 36px;
  font-size: 14px;
  color: #333333;
  border: 0.5px solid #bbbbbb;
}
.OrganizationalStructure .card-item .item-title span {
  text-align: right;
}
.OrganizationalStructure .el-dialog {
  background-color: rgb(215, 239, 236);
  padding-bottom: 5px;
}
.OrganizationalStructure .remove-dialog .el-dialog__header {
  padding: 0px 5px;
}
.OrganizationalStructure .remove-dialog .el-dialog__header .el-dialog__title {
  font-size: 13px;
}
.OrganizationalStructure .remove-dialog .el-dialog__headerbtn {
  top: 3px;
  right: 10px;
}
.OrganizationalStructure .remove-dialog .el-dialog__body {
  border: 1px solid #90e8c6;
  background-color: white;
  margin: 0px 5px;
  padding: 0px;
}
.OrganizationalStructure .remove-dialog .dialog-body .body-title {
  margin: 20px 10px;
}
.OrganizationalStructure .remove-dialog .dialog-footer {
  display: block;
  text-align: center;
  margin-bottom: 20px;
}
.OrganizationalStructure .remove-dialog .dialog-footer .el-button {
  padding: 5px 25px;
  margin-top: 5px;
  font-size: 13px;
}
</style>    